<template>
  <div style="margin-top: 50px">
    <el-form :model="form" ref="productDescForm" label-width="120px" style="width: 600px" size="small">
      <el-form-item prop="description">
            <quill-editor v-model="form.description" class="editor" ref="myQuillEditor" :options="editorOption"></quill-editor>
            <el-upload style="display:none"  :action="uploadImgUrl" :show-file-list="false" :before-upload='newEditorbeforeupload'  :on-success='newEditorSuccess'
                :data="uploadParam" name="imageFile"  ref="uniqueId" id="uniqueId">
          </el-upload >
        </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品基本信息</el-button>
        <el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {getObj,putObj} from 'api/shop/goods/goods/index';
  import {getPicklist} from 'api/param/picklist/index';
  import {getAllShopList} from 'api/shop/shops/index';
  import { getToken } from 'utils/auth';
  import { fetchTree } from 'api/shop/goods/category/index';
  import { mapGetters } from 'vuex';

  export default {
    name: "ProductDescDetail",
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: Object,
        uploadImgUrl: this.GLOBAL.uploadImgUrl,
        uploadParam:{"useType":"goods"},
        requestHeader:{"token":getToken()},
        rules: {
          description: [{required: true,message: '请输入详情',trigger: 'blur'}
        ],
        },
        editorOption: {
          placeholder: '',
          theme: 'snow',  // snow or 'bubble'
          modules: {
            toolbar: {
                container:[
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean'],
                ['link', 'image', 'video']
              ],
              handlers:{
                'image': function (value) {
                    if (value) {
                      var fileInput =document.querySelector('#uniqueId input') //隐藏的file元素
                      fileInput.click() //触发事件
                    }else{
                      this.quill.format('image', false);
                    }
                }
              }
            }
          }
        }
      }
    },
    created() {
    },
    computed: {
      
    },
    methods: {
      newEditorbeforeupload(file){                       
      const isJPG = file.type === 'image/jpeg' ||file.type ===  'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG或PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;                                            
      },
      //上传图片回调 
      newEditorSuccess(response, file, fileList){
        if(response.status===0){
          // 获取富文本组件实例
          let quill = this.$refs.myQuillEditor.quill 
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片，res为服务器返回的图片链接地址
          let imgUrl = this.GLOBAL.imgBaseURL + response.data;
          quill.insertEmbed(length, 'image', imgUrl)
          // 调整光标到最后
          quill.setSelection(length + 1)   
        }
      },
      handlePrev() {
        this.$emit('prevStep')
      },
      handleNext() {
        this.$emit('nextStep')
      }
    }
  }
</script>

<style scoped>
  .littleMargin {
    margin-top: 10px;
  }
</style>
